<template>
    <div>
        <div>
            单项选择题目：<el-input
            class="inputboxClass"
            placeholder="编辑题目"
            v-model="title"
            clearable>
        </el-input><br/>
            
            <div 
                v-for="(item,index) in items"
                :key="index" >  

                <el-radio   v-model="radio"    
                :label="index"
                v-if="index!=0">  

                {{index}}--
                <input v-model="items[index].title">
            </el-radio>
            </div>
           <br/>
            <button @click="log()">打印</button>
            <button @click="add()">增加</button>
            <button @click="del()">删除</button><br/> 
             <br/>
              <br/>
               <br/>

        </div>
    </div>

</template>

<script>
export default {
//大概思路：使用radio代表当前的选项；items数组中存储选项信息，选项对象中的title为题目内容；items数组的第一个对象的title为空
//编辑框的内容绑定items中的当前radio的title。默认radio为0，以及清空时将radio设为0，达到使得编辑框没有任何内容的效果
//由于elementui的单选框中，点击某个选项表示将v-model绑定的值变成选中的label的值，所以可以通过点击显示对应items的title
//增加功能：其实就是push一个新的对象
    data(){
        return{  
            title: '',                                    //题目  
            count:4,
            radio: '0',                                   //双向绑定了用户选中的选项           
            items: [{title:''},                           //选项的信息  
                {
                index: 1,                                  //index表示选项号 
                title: "title1"                             //表示内容
                },{    
                index:2,    
                title: "title2"
                },{     
                index: 3,             
                title: "title3"
                }]
        }
    },
    methods: {
        clear(){
            this.radio=0;
        },
        deleteitem(){
            this.test=false;
        },
        add(){
            this.items.push({title: "title"+this.count,
            index:this.count});
            this.count++;
            
        },
        del(){
            this.radio=0;
            this.items.pop();
            this.count--;
            
        },
        log(){
            console.log(this.items);
            console.log(this.title);
        }
    },
    props: ['item','index']
}
</script>
<style  scoped>
.inputboxClass{
    width: 300px;

}


</style>
